<template>
    <el-form :model="user">
        <el-form-item>
            <el-input v-model="user.phone" :rows="8" type="text" placeholder="必填：手机号码" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="user.captcha" type="text" placeholder="必填：上方图片内容">
                <template #append>
                    <el-button>发送短信验证码</el-button>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="user.smsCode" type="text" placeholder="必填：收到的短信验证码" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="user.logonName" type="text" placeholder="建议填写：用户名" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="user.password" type="password" placeholder="建议填写：密码，不少于6位字符" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary">提交</el-button>
            <!-- TODO:需要绑定v-model么？怎么右对齐？ -->
            <el-checkbox label="继续绑定微信公众号"></el-checkbox>
        </el-form-item>

    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const user = reactive({
    inviteCode: '',
    phone: '',
    captcha: '',
    smsCode: '',
    logonName: '',
    password: '',
    //ConfirmPassword: '',   //TOOD: 不需要传后台，所以？
})

</script>





<!-- <template>

    <div class="mt-4">
      <el-input
        v-model="input3"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button  />
        </template>
      </el-input>
    </div>

  </template> -->
  

  